<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <a-select ref="select" placeholder="请选择采集点" value="a" style="width: 200px">
        <a-select-option value="a">某地桥梁监控分析</a-select-option>
      </a-select>
    </div>

    <div class="mt-2 p-2 bg-white flex justify-between">
      <thisSearch />
      <div>
        <a-button type="primary"> 导出图表 </a-button>
        <a-button type="primary" class="ml-2"> 导出数据 </a-button>
      </div>
    </div>

    <div class="mt-2 px-2">
      <a-row :gutter="8">
        <a-col class="gutter-row" :span="12">
          <thisChart />
        </a-col>
        <a-col class="gutter-row" :span="12">
          <thisChart />
        </a-col>
      </a-row>
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { LayoutBreadcrumb } from '../../../../layouts/default/header/components';
import thisSearch from '../comp/search.vue';
import thisChart from './chart.vue';

export default defineComponent({
  components: { LayoutBreadcrumb, thisSearch, thisChart },
  setup() {
    return {};
  },
});
</script>
